<template>
  <div class="register-codes-box">
    <div class="register-title">注册码[每天20个]</div>
    <div :class="['register-codes', 'register-codes-'+global.showType]">
      <div :class="['code-box', 'code-box-'+global.showType]" v-for="item in codes" :key='item.code'>
        {{item.code}}
      </div>
    </div>
  </div>
</template>

<script>

export default {
  components:{
  },
  data(){
    return {
      codes:[]
    }
  },
  created() {
    this.getRegisterCodes();
  },
  methods:{
    getRegisterCodes() {
      this.$http.postForm('/user/getRegisterCodes', null, res=>{
        this.codes = res;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.register-codes-box{
  width: 90%;
  margin: 10px auto 10px auto;
  background-color: #fff;
  border-radius: 7px;
  .register-title{
    padding: 10px 0;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    border: #ccc solid 1px;
    border-width: 0 0 1px 0;
  }
  .register-codes-mobile{
    padding: 0 0 10px 0;
  }
  .register-codes-pc{
    padding: 0 50px 10px 50px;
  }
  .register-codes{
    display: flex;
    flex-wrap: wrap;
    .code-box-mobile{
      width: 100%;
      border: #ccc solid 1px;
      border-width: 0 0 1px 0;
    }
    .code-box-pc{
      width: 50%;
    }
    .code-box{
      text-align: center;
      // display: inline-block;
      // height: 30px;
      line-height: 30px;
      font-size: 15px;
    }
  }
}
</style>